<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      http-equiv="Cache-Control"
      content="no-cache, no-store, must-revalidate"
    />
    <meta http-equiv="Cache" content="no-cache" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <link
      rel="stylesheet"
      href="https://kendo.cdn.telerik.com/2021.3.1207/styles/kendo.default-v2.min.css"
    />
    <script src="https://unpkg.com/vue@next"></script>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2021.3.1207/js/kendo.all.min.js"></script>
    <title>视觉惊艳</title>
    <style>
      /* * {
        margin: 0;
        padding: 0;
      } */
      body {
        background-color: rgba(68, 127, 130, 1);
        display: flex;
        justify-content: center;
      }
      .shell {
        position: relative;
        top: 150px;
        left: -110px;
      }
      .a,
      .b,
      .c {
        position: absolute;
        height: 300px;
        width: 30px;
        background-color: #333;
        top: 49px;
        left: 0;
        transform: rotate(60deg) skew(30deg);
      }
      .b {
        background-color: #aaa;
        transform: rotate(180deg) skew(30deg);
        left: 180px;
        top: 36px;
      }
      .c {
        background-color: #666;
        transform: rotate(-60deg) skew(30deg);
        left: 101px;
        top: 199px;
      }
      .a::after,
      .b::after,
      .c::after {
        content: "";
        position: absolute;
        width: 0;
        height: 278px;
        left: 165px;
        top: -141px;
        transform: rotate(-90deg) skew(0deg);
        border-bottom: 23px solid transparent;
        border-right: 20px solid #333;
        transition: 0.5s;
      }
      .b::after {
        border-right: 20px solid #aaa;
      }
      .c::after {
        border-right: 20px solid #666;
      }
      .wrapper2 {
        position: absolute;
        transform: scale(0.5);
        margin-left: 56px;
        margin-top: 121px;
      }
      .wrapper3 {
        position: absolute;
        transform: scale(0.22);
        margin-left: 88px;
        margin-top: 188px;
      }
      .d,
      .e,
      .f {
        position: absolute;
        background-color: #333;
        width: 130px;
        height: 25px;
        top: 270px;
        left: -160px;
        transform: rotate(60deg) skew(30deg);
      }
      .e {
        background-color: #666;
        top: 400px;
        left: 173px;
        transform: rotate(120deg) skew(30deg);
      }
      .f {
        background-color: #aaa;
        top: 35px;
        left: 100px;
        transform: rotate(180deg) skew(30deg);
      }
      .shell:hover .a::after,
      .shell:hover .b::after,
      .shell:hover .c::after {
        height: 290px;
        top: 31px;
        left: 76px;
      }
    </style>
  </head>
  <body>
    <!-- div.shell>div.wrapper  div.a * 3-->
    <div class="shell">
      <div class="wrapper">
        <div class="a"></div>
        <div class="b"></div>
        <div class="c"></div>
      </div>
      <div class="wrapper2">
        <div class="a"></div>
        <div class="b"></div>
        <div class="c"></div>
        <div class="d"></div>
        <div class="e"></div>
        <div class="f"></div>
      </div>
      <div class="wrapper3">
        <div class="a"></div>
        <div class="b"></div>
        <div class="c"></div>
        <div class="d"></div>
        <div class="e"></div>
        <div class="f"></div>
      </div>
    </div>
  </body>
</html>
